<!DOCTYPE html>
<title>GameLoop Tests</title>
<script src="../src/ObjectContainer.js"></script>
<script src="../src/EventSet.js"></script>
<script src="../src/GameLoop.js"></script>
<script>
    var g = new GameLoop(),        
        canvas, context,        
        x = 0, y = 0, c = 0, s = 700, r = 2 * Math.PI * s;

    g.on.add('update', function (delta) {          
        c += delta; 
        if (c >= r) c -= r;
        x = Math.cos(c / s);
        y = Math.sin(c / s);
        //console.log(cycles, c, x, y);
    });

    g.on.add('render');
    g.on.render(function () {        
        context.clearRect(-canvas.width / 2, -canvas.height / 2, canvas.width, canvas.height);
        context.beginPath();        
        context.arc(x * 100, y * 100, 20, 0, 2 * Math.PI, false);
        context.fillStyle = 'white';
        context.fill();
        context.lineWidth = 1.8;
        context.strokeStyle = 'black';
        context.stroke();
    });

    window.addEventListener('load', function () {        
        document.getElementById('start').addEventListener('click', g.start.bind(g));
        document.getElementById('stop').addEventListener('click', g.stop.bind(g));
        canvas = document.getElementById('canvas');
        context = canvas.getContext('2d');
        context.translate(canvas.width / 2, canvas.height / 2);
    });
</script>
<button id=start>Start</button>
<button id=stop>Stop</button>
<span id=clock></span>
<canvas id=canvas width=600 height=400></canvas>